<template>
  <view class="container">
    <!-- 视频预览区域 -->
    <view
      class=""
      style="
        position: relative;
        height: 100vh;
        margin-top: 300rpx;
        box-sizing: border-box;
        display: flex;
        flex-direction: column;
        align-items: center;
      "
      v-if="showcamera"
    >
      <view
        class=""
        style="margin-bottom: 30rpx; text-align: center; color: red"
      >
        请确保环境明亮，面部无遮挡物
      </view>
      <view
        class=""
        style="margin-bottom: 30rpx; text-align: center; color: red"
      >
        请眨眨眼
      </view>
      <camera id="camera" device-position="front" flash="off"></camera>
    </view>
    <view class="authentication-content" v-else>
      <view class="title"> 尊敬的用户： </view>
      <view class="content">
        为了更好的向您提供服务，本服务的功能由第三方服务提供方提供核验数据及技术支持。我们会要求第三方服务提供方以不低于我们的安全水准使用和存储您的信息，并要求第三方服务提供者承诺尽到信息安全保护义务。
      </view>
      <view class="Information" style="margin-bottom: 32rpx">
        <image
          src="../../static/person.png"
          style="
            width: 42rpx;
            height: 42rpx;
            padding: 9rpx;
            margin-right: 24rpx;
          "
          mode=""
        ></image>
        <input class="uni-input" v-model="name" placeholder="输入姓名" />
      </view>
      <view class="Information" style="margin-bottom: 68rpx">
        <image
          src="../../static/idcard.png"
          style="width: 60rpx; height: 60rpx; margin-right: 24rpx"
          mode=""
        ></image>
        <input
          class="uni-input"
          v-model="cardId"
          type="idcard"
          placeholder="点击输入有效身份证号码"
        />
      </view>
      <view class="button" @click="check"> 开始实名认证 </view>
      <view
        class=""
        style="
          margin: 24rpx auto;
          text-align: center;
          font-size: 24rpx;
          color: #bbbbbb;
        "
      >
        即将进行人脸识别，请按照提示完成相应的动作
      </view>
      <view
        class=""
        style="
          margin: 24rpx auto;
          text-align: center;
          font-size: 24rpx;
          color: #bbbbbb;
        "
      >
        请确保环境明亮，面部无遮挡物（请摘下眼镜操作）
      </view>
    </view>
  </view>
</template>

<script>
  import { http } from '@/utils/http.js'
  import { useUsercodeStore } from '@/store/usercode.js'

  export default {
    data() {
      return {
        cameraContext: null,
        videoToken: '',
        url: '',
        showcamera: false,
        name: '',
        cardId: '',
        videoUrl: '',
      }
    },
    onReady() {
      // 初始化摄像头上下文
      this.cameraContext = uni.createCameraContext()
    },
    methods: {
      check() {
        const userCodeStore = useUsercodeStore()
        if (!userCodeStore.usercode.token) {
          uni.utils.toast('请先登录')
          setTimeout(() => {
            uni.navigateTo({
              url: `/pages/login/login`,
            })
          }, 2000)
        } else if (!this.name || !this.cardId) {
          uni.utils.toast('请输入姓名和身份证号')
        } else {
          this.goVideo()
        }
      },
      goVideo() {
        this.showcamera = true
        // 自动开始录制视频
        this.startRecording()
      },
      startRecording() {
        this.cameraContext.startRecord({
          timeout: 2000,
          success: (res) => {
            console.log('开始录制视频')
            // 你可以在这里添加定时器或逻辑来自动停止录制
            setTimeout(() => {
              this.stopRecording()
            }, 2000) // 2秒后自动停止
          },
          fail: (err) => {
            this.startRecording()
            console.error('录制视频失败', err)
          },
        })
      },
      stopRecording() {
        this.cameraContext.stopRecord({
          success: async (res) => {
            console.log('录制完成，文件路径：', res.tempVideoPath)
            this.showcamera = false
            // 在这里可以处理视频文件，例如上传到服务器或保存到本地
            // 七牛云
            const res1 = await http.request({
              url: '/api/config/qiUpload',
              method: 'POST',
              data: {},
            })
            console.log(res1)
            this.videoToken = res1.data.uptoken
            this.url = res1.data.domain

            uni.uploadFile({
              url: 'https://upload-z0.qiniup.com/',
              filePath: res.tempVideoPath, //头像文件
              header: {},
              formData: {
                token: this.videoToken,
              },
              name: 'file',
              success: async (uploadFileRes) => {
                console.log('zhong')
                console.log(uploadFileRes.data)
                this.videoUrl = this.url + JSON.parse(uploadFileRes.data).key
                const res2 = await http.request({
                  url: '/api/face/facexcx/facePost',
                  method: 'POST',
                  data: {
                    name: this.name,
                    idcard: this.cardId,
                    url: this.videoUrl,
                  },
                })
                console.log(res2)
                if (res2.st == 1) {
                  uni.utils.toast(res2.msg)
                  setTimeout(() => {
                    uni.navigateTo({
                      url: `/minePage/authenticationsuccess/index`,
                    })
                  }, 2000)
                } else {
                  uni.utils.toast(res2.msg)
                }
              },
            })
          },
          fail: (err) => {
            console.error('停止录制失败', err)
          },
        })
      },
    },
  }
</script>

<style lang="scss" scoped>
  .container {
    width: 100%;
    height: 100vh;
    .authentication-content {
      padding: 52rpx 44rpx;
      .title {
        margin-bottom: 30rpx;
        font-size: 28rpx;
        font-weight: 700;
      }
      .content {
        margin-bottom: 46rpx;
        font-size: 28rpx;
        color: #9b9b9d;
      }
      .Information {
        display: flex;
        align-items: center;
        .uni-input {
          height: 80rpx;
          padding: 20rpx;
          width: 100%;
          box-sizing: border-box;
          border-radius: 12rpx;
          background-color: #f6f6f6;
          font-size: 28rpx;
          line-height: 80rpx;
        }
      }
      .button {
        width: 380rpx;
        height: 84rpx;
        margin: 0 auto;
        border-radius: 42rpx;
        background-color: $all-color;
        line-height: 84rpx;
        text-align: center;
        font-size: 32rpx;
        font-weight: 700;
        color: #3d3d3d;
      }
    }
  }
  camera {
    width: 420rpx;
    height: 420rpx;
    border-radius: 50%;
  }
</style>
